<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
            <el-input v-model="stu.uname" placeholder="请输入用户名" clearable @clear="search()"></el-input>
        </el-form-item>
        <el-form-item>
            <el-input v-model="stu.uage" placeholder="请输入年龄"></el-input>
        </el-form-item>
        
        <el-form-item>
            <el-button type="primary" @click="page=1;search()">查询</el-button>
            <el-button type="success"  icon="el-icon-circle-plus-outline"  @click="dialogFormVisible=true;title='添加用户';entity={}">添加</el-button>
        </el-form-item>
     </el-form>

    <el-table :data="stuList" style="width: 100%">

        <!--根据属性直接渲染  -->
      <el-table-column prop="uid" label="ID"> </el-table-column>
      <el-table-column prop="uname" label="名字"> </el-table-column>
      <el-table-column prop="uage" label="年龄"> </el-table-column>
      <el-table-column  label="成年/未成年"> 
            <!-- 自定义 渲染 -->
            <template slot-scope="scope">
                <div>
                    {{scope.row.uage >=18?'成年人':"未成年人"}}
                </div>
            </template>
      </el-table-column>

       <el-table-column  label="操作"> 
           <template slot-scope="scope">
               <div>
                   <el-button @click="updateStu(scope.row)" type="primary" size="mini" icon="el-icon-edit">修改</el-button>
                    <el-button @click="delStu(scope.row.uid)" type="danger" size="mini" icon="el-icon-delete">删除</el-button>
               </div>
           </template>
       </el-table-column>
      
      
    </el-table>
    <br/>
    <el-pagination
        style="float:right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 25, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>

  

     <!-- 添加用户dialog -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
        <el-form>
            <el-form-item label="用户名" label-width="100px" >
                <el-input v-model="entity.uname" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="年龄"   label-width="100px">
                <el-input v-model="entity.uage" autocomplete="off"></el-input>
            </el-form-item>
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveStu()">确 定</el-button>
        </div>
    </el-dialog>


  </div>
</template>
<script>
import axios from "axios";
//导入api
import { searchList,save } from "@/api/user";
export default {
  data() {
    return {
      stu: {},
      entity:{

      },
      stuList: [],
      pages: 0, // 总页数
      page: 1,
      size: 5,
      total:0 ,//总记录数
      dialogFormVisible:false,
      title:"",
    };
  },
  methods: {
    search() {
      //  与服务端交互
      searchList(this.stu, this.page, this.size).then((res) => {
        this.stuList = res.data;

        this.pages = res.pages;

         //总记录数
         this.total = res.total;

      });
    },

    saveStu(){

        console.log(this.entity);
        if(this.entity.uid){//修改
                alert("update")

                //后端交互，调用后端的修改接口
        }else{//添加
             //与服务端交互，调用后端的添加接口
                save(this.entity).then(res=>{
                    console.log(res);

                    if(res.success){
                    this.$notify({
                        title: '成功',
                        message: res.msg,
                        type: 'success',
                        duration:1000
                    });

                    this.dialogFormVisible = false;
                    //刷新页面
                    this.page = 1;
                    this.search();
                    }else{
                    this.$notify({
                        title: '失败',
                        message: res.msg,
                        type: 'error'
                    });
                    }


                })
        }
    },

    updateStu(stu){
        this.title = "修改用户"
        console.log(stu);
        this.entity = stu;
        this.dialogFormVisible = true;
    },


    delStu(uid){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(function(){
                //与服务端交互，调用服务端的删除api
                //todo ....
                alert("del"+uid)
            }).catch();
    },
    handleCurrentChange(pageNow){//监听当前页的变化

        this.page = pageNow;

        this.search();
    },
    handleSizeChange(size){//监听每页显示条数的变化
        this.size = size;

        this.search();
    }
  },
  created() {
    //页面加载，获取第一页数据
    this.search();
  },
};
</script>
